html,body{
    background: #fff;
}

.logged_in{
    flex-direction: column;
    align-content: space-between;
    position: relative;

    width: 100vw;
    height: 100vh;
    background: #fff;
    .functional_domain{
        margin: 15px 0;
        position: relative;
        .close{
            display: block;
            margin: 0 15px;
            width: 25px;
            height: 25px;
            line-height: 25px;
            color: #000;
            font-size: 25px;
        }
    }

    .main{
        position: relative;
        flex-grow: 1;
        .title{
            width: 100%;
            text-align: center;
            span{font-size: 25px;}
        }
        
        .agreement{
            position: relative;
            .checkbox{
                color: #bababa;
            }
            .selected{color: #00bb30;}
            .content{
                text-align: center;
                line-height: 1.5;
                white-space: wrap;
                word-wrap: break-word;
                font-size: 12px;
                color: #818181;
                a{
                    font-size: 12px;
                    color: #00bb30;
                }
            }
            .tip{
                display: none;
                position: absolute;
                // left: -12%;
                bottom: 100%;
                opacity: 0.5;
                padding: 12px 25px 12px 15px;
                font-size: 12px;
                line-height: 12px;
                color: #38a94d;
                background: #e6f8ea;
                border-radius: 10px;
                border: 1.5px solid #8ae0a1;
                .sharp{
                    display: block;
                    position: absolute;
                    top: 90%;
                    left: 40px;
                    width: 8px;
                    height: 8px;
                    transform: rotateZ(45deg);
                    background: #e6f8ea;
                    border-bottom: 1px solid #8ae0a1;
                    border-right: 1px solid #8ae0a1;
                }
            }
        }

    }
}

.regUsername_tipBox{
    position: absolute;
    top: 10px;
    opacity: 0;

    justify-content: center;
    width: 100%;
    div{
        position: absolute;
        top: 0;

        box-sizing: border-box;
        min-width: 65px;
        padding: 15px 20px;
        background: #fff;
        filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
        border-radius: 21px;
        font-size: 12px;
        text-align: center;

        display: none;
    }
}

.login_tipBox{
    position: absolute;
    bottom: 5%;
    opacity: 0;

    justify-content: center;
    width: 100%;

    div{
        box-sizing: border-box;
        min-width: 65px;
        padding: 15px 20px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 21px;
        font-size: 12px;
        text-align: center;

        display: none;
    }
}